<template>
  <el-dialog
    class="outer-task-generate-dialog"
    :title="'生成任务'"
    width="1000px"
    :visible.sync="dialogVisible"
    :close-on-click-modal="true"
    v-dialogDrag="true"
    append-to-body
    @open="handleDialogOpen"
    @closed="handleDialogClosed"
  >
    <el-form :model="queryParams" inline>
      <el-form-item label="日期" label-width="50px">
        <el-date-picker
          style="width: 250px;"
          v-model="queryParams.daterange"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :clearable="false"
          :unlink-panels="true"
          @change="getWaitOrganizationList"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="批次" label-width="50px">
        <el-select
          style="width: 150px;"
          v-model="queryParams.batchNum"
          placeholder="请选择"
          :clearable="true"
          @change="getWaitOrganizationList"
        >
          <el-option
            v-for="item in 4"    
            :key="item"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <el-transfer
      class="transfer"
      :titles="['待选中', '已选中']"
      v-model="transferValue"
      :data="transferColumns"
      :props="{ key: 'entrustOrganizationId', label: 'entrustOrganizationName' }"
      :filterable="true"
    ></el-transfer>

    <div class="dialog-footer" slot="footer">
      <el-button type="primary" :loading="btnLoading" @click="handleGenerate">生 成</el-button>
      <el-button @click="dialogVisible = false">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getWaitOrganizations, createTask } from '@/api/slides/task'

export default {
  name: 'OuterTaskGenerateDialog',
  components: {},
  dicts: [],
  props: {
    show: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      queryParams: {},

      transferColumns: [],
      transferValue: [],

      btnLoading: false,
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.show
      },
      set(value) {
        this.$emit('update:show', value)
      }
    }
  },
  created() {
    this.initQueryParams()
  },
  methods: {
    // 弹框打开时
    handleDialogOpen() {
    },
    // 弹框关闭时
    handleDialogClosed() {
      this.initQueryParams()
      this.transferColumns = []
      this.transferValue = []
    },
    // 获取查询参数
    getQueryParams() {
      const params = JSON.parse(JSON.stringify(this.queryParams))
      params.queryStart = params.daterange ? params.daterange[0] : ''
      params.queryEnd = params.daterange ? params.daterange[1] : ''
      delete params.daterange
      return params
    },
    // 初始化查询参数
    initQueryParams() {
      const date = new Date()
      const mDate = new Date(date.setMonth(date.getMonth() - 3))
      this.queryParams = {
        daterange: [
          this.parseTime(mDate, '{y}-{m}-{d}'),
          this.parseTime(new Date(), '{y}-{m}-{d}'),
        ],
        batchNum: '',
      }
    },
    // 获取单位列表
    getWaitOrganizationList() {
      const { daterange, batchNum } = this.queryParams
      if (!daterange || !batchNum) return
      this.transferColumns = []
      this.transferValue = []
      const params = this.getQueryParams()
      getWaitOrganizations(params).then(res => {
        this.transferColumns = res.data || []
      }).catch(err => {})
    },
    // 点击生成
    handleGenerate() {
      if (this.transferValue.length <= 0) {
        this.$message.warning('请选择单位')
        return
      }
      this.btnLoading = true
      const data = []
      this.transferValue.forEach(value => {
        const findRes = this.transferColumns.find(item => item.entrustOrganizationId == value)
        data.push({
          taskDetectionTogetherId: findRes.taskDetectionTogetherId,
          agreementId: findRes.agreementId,
          entrustOrganizationId: findRes.entrustOrganizationId,
          year: findRes.year,
          batchNum: findRes.batchNum,
          wearingBeginTime: this.queryParams.daterange[0],
          wearingEndTime: this.queryParams.daterange[1],
        })
      })
      createTask(data).then(res => {
        this.btnLoading = false
        this.$message.success('操作成功')
        this.dialogVisible = false
        this.$emit('refresh')
      }).catch(err => {
        this.btnLoading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.outer-task-generate-dialog {

  ::v-deep .el-dialog__body {
    height: 70vh;
    overflow-y: auto;
  }

  ::v-deep .transfer {
    width: 100%;

    .el-transfer-panel {
      width: calc(calc(100% - 182px) / 2);
    }

    .el-transfer-panel__body {
      height: calc(70vh - 40px - 100px - 15px);
    }

    .el-transfer-panel__list {
      height: calc(100% - 32px - 15px);
    }
  }
}
</style>